<template>
  <el-dialog
    v-model="authDialog"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="400px"
    class="auth-dialog"
  >
    <dialog-top-close @close="handleClose"></dialog-top-close>
    <div class="auth-container">
      <div class="auth-header">
        <div 
          class="auth-tab" 
          :class="{ active: loginDialog }"
          @click="switchToLogin"
        >
          登录
        </div>
        <div 
          class="auth-tab" 
          :class="{ active: !loginDialog }"
          @click="switchToRegister"
        >
          注册
        </div>
      </div>
      <div class="auth-content">
        <login-component v-if="loginDialog"></login-component>
        <register-component v-else></register-component>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { useAuthStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { watch } from 'vue'
import LoginComponent from './Login.vue'
import RegisterComponent from './Register.vue'

export default {
  name: 'Auth',
  components: {
    LoginComponent,
    RegisterComponent
  },
  setup() {
    const authStore = useAuthStore()
    const { authDialog, loginDialog } = storeToRefs(authStore)
    
    // 添加调试信息
    watch(() => authDialog.value, (newVal) => {
      console.log('Auth dialog value changed:', newVal)
    })
    
    return {
      authStore,
      authDialog,
      loginDialog
    }
  },
  methods: {
    handleClose() {
      this.authStore.clearDialog()
    },
    switchToLogin() {
      this.authStore.setLoginDialog(true)
    },
    switchToRegister() {
      this.authStore.setLoginDialog(false)
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-dialog {
  :deep(.el-dialog__header) {
    display: none;
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.auth-container {
  padding: 20px;
}

.auth-header {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.auth-tab {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 8px 16px;
  position: relative;
  transition: all 0.3s;
  
  &.active {
    color: #333;
    font-weight: 600;
    
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background: linear-gradient(90deg, #4285f4, #34a853);
      border-radius: 1.5px;
    }
  }
  
  &:hover {
    color: #666;
  }
}

.auth-content {
  min-height: 300px;
}
</style>
